<template>
  <view class="container">
    <u-tabs :current="tabsIndex" :scrollable="false" :list="tabsList" keyName="label"
            @click="tabClick($event)"></u-tabs>
    <view class="tebs__content">
      <view class="flex">
        <view class="flex area align-center justify-between">
          <view @click="toCity" class="flex align-center">
            <view class="area-text">{{ location.name || '选择城市' }}</view>
            <u-icon size="12" name="arrow-right"></u-icon>
          </view>
          <view class="vertical"></view>
          <u-icon size="20" name="search"></u-icon>
          <input v-model="params.keyword" class="search-input" type="text"
                 placeholder="请输入商圈/景点/公寓名称"/>
          <image
              src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/home-location.png"
              class="location-img" mode="widthFix"></image>
        </view>
      </view>
      <template v-if="tabsIndex === 0">
        <view class="dateBox" :key="tabsIndex === 0">
          <view class="dataBox__item" @click="showCalendarHandel">
            <view class="dateBox__item__label">入住日期</view>
            <view class="dateBox__item__value">{{ params.startTime|date('mm月dd日') }}</view>
          </view>
          <view class="dataBox__item" @click="showCalendarHandel">
            <view class="dateBox__item__label">离开日期</view>
            <view class="dateBox__item__value">{{ params.endTime|date('mm月dd日') }}
              <text class="night">共{{ subDay }}晚</text>
            </view>
          </view>
          <view class="dataBox__item" @click="showMan" style="width: 33%">
            <view class="flex align-center">
              <text class=" iconfont">&#xe627;</text>
              <text>{{ checkInNumber }}/{{ bedNumber }}</text>
              <u-icon size="12" name="arrow-right"></u-icon>
            </view>
          </view>
        </view>
      </template>
      <template v-else-if="tabsIndex === 1">
        <view class="dateBox" :key="tabsIndex === 0">
          <view class="dataBox__item" @click="showCalendarHandel('single')">
            <view class="dateBox__item__label" >入住日期</view>
            <view class="dateBox__item__value">{{ params.startTime|date('mm月dd日') }}</view>
          </view>
          <view class="dataBox__item">
            <view class="dateBox__item__label" style="text-align: center">租赁时间</view>
            <view class="dateBox__item__value">
              <view class="tags">
                <view class="tags__item" :class="{active: timeTagIndex=== index}" v-for="(tag,index) in timeTags"
                      :key="index"
                      @click="selectTimeTag(tag,  index)">
                  <text>{{ tag.label }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>
      <template v-else-if="tabsIndex === 2">
        <view class="dateBox" :key="tabsIndex === 0">
          <view class="dataBox__item" @click="showCalendarHandel('single')">
            <view class="dateBox__item__label" >入住日期</view>
            <view class="dateBox__item__value">{{ params.startTime|date('mm月dd日') }}</view>
          </view>
          <view class="dataBox__item">
            <view class="dateBox__item__label" style="text-align: center">租赁时长</view>
            <view class="dateBox__item__value">
              <view class="input">
                <u-input
                    v-model="year"
                    type="number"
                    border="none"
                    inputAlign="center"
                >
                  <template slot="suffix">
                    年
                  </template>
                </u-input>
              </view>

            </view>
          </view>
        </view>
      </template>
    </view>
    <button class="search-btn" @click="toSearch">搜索</button>
    <!-- 日历组件 -->
    <uvCalendar :show="showCalendar" :mode="calendarMode" @close="closeCalendar" @confirm="confirmCalendar"
                color="#FF7947" startText="入住时间" endText="离开时间" monthNum="12" :default-date="defaultDate"
                ref="calendar">
    </uvCalendar>
    <!-- 人数/床数 -->
    <u-popup :show="showManAndBed" mode="bottom" @close="close" @open="open" :closeable="true">
      <view class="filtrate-bed">
        <view class="title">选择人数/床位</view>
        <view style="padding: 0 30rpx;">
          <view class="main-title">人数</view>
          <view class="select-btn" style="margin-bottom: 52rpx;">
            <view class="item-man" @click="selectMan(index+1)"
                  :class="index+1===queryParams.checkInNumber?'item-active':''" v-for="(item,index) in 4"
                  :key="index">
              <text class="man-text" v-if="index<3">{{ index + 1 }}人</text>
              <text class="man-text" v-else>{{ index + 1 }}人及以上</text>
              <image v-if="index+1===queryParams.checkInNumber" class="active-img"
                     src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/man-active.png"
                     mode=""></image>
            </view>

          </view>
          <view class="main-title">床位</view>
          <view class="select-btn">
            <view class="item-man" @click="selectBed(index+1)"
                  :class="index+1==queryParams.bedNumber?'item-active':''" v-for="(item,index) in 4"
                  :key="index">
              <text class="man-text" v-if="index<3">{{ index + 1 }}床</text>
              <text class="man-text" v-else>{{ index + 1 }}床及以上</text>
              <image v-if="index+1==queryParams.bedNumber" class="active-img"
                     src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/man-active.png"
                     mode=""></image>
            </view>
          </view>
          <button class="submit-btn" @click="submitBed">确定</button>
          <button class="clear-btn" @click="clearBed">清空</button>

        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
import {DateAdd, DateDiff} from "@/utils/time";
import uvCalendar from '@/components/uv-calendar/uv-calendar.vue'

export default {
  name: "tabs-menus",
  props: {
    queryParams: {
      type: Object,
      default: () => {
        return {
          pageNum: 1,
          pageSize: 12,
          startTime: '',
          endTime: '',
          keyword: '',
          "house.cityId": '',
          checkInNumber: null, //人数
          bedNumber: null, //床数
        }
      }
    }
  },
  components: {
    uvCalendar
  },
  data() {
    return {
      // tabs索引
      tabsIndex: 0,
      // tabs列表
      tabsList: [
        {
          label: '日租',
          value: '1'
        },
        {
          label: '短租',
          value: '2'
        },
        {
          label: '长租',
          value: '3'
        }
      ],
      // 日历组件
      calendarMode: 'range',
      // 显示日历
      showCalendar: false,
      // 默认日期
      defaultDate: [],
      showManAndBed: false,
      timeTagIndex: 0,
      // 时间标签数据
      timeTags: [
        {
          label: '1-3月',
          value: '3'
        }
        , {
          label: '3-6月',
          value: '6'
        }
        , {
          label: '6-9月',
          value: '9'
        }
        , {
          label: '9-11月',
          value: '11'
        }
      ],
      //  年数
      year: 1
    }
  },
  computed: {
    params: {
      get() {
        return this.queryParams
      },
      set(v) {
        this.$emit('update:queryParams', v)
      }
    },
    subDay: {
      get() {
        return DateDiff(this.queryParams.startTime, this.queryParams.endTime)
      },
      set() {

      }
    },
    location: {
      get() {
        return this.$store.state.user.location
      },
      set() {
      }
    },
    //人数
    checkInNumber() {
      if (this.queryParams.checkInNumber === 4) {
        return '4人及以上'
      }
      return this.queryParams.checkInNumber ? this.queryParams.checkInNumber + '人' : '人数'
    },
    //床数
    bedNumber() {
      if (this.queryParams.bedNumber === 4) {
        return '4床及以上'
      }
      return this.queryParams.bedNumber ? this.queryParams.bedNumber + '床' : '床位'
    }
  },
  watch: {
    params: {
      handler(newValue) {
        this.$emit('update:queryParams', newValue)
      },
      deep: true
    }
  },
  methods: {
    // tab点击事件
    tabClick(e) {
      this.tabsIndex = e.index
      if (this.tabsIndex === 0){
        this.params.endTime = DateAdd('day', this.queryParams.startTime,1)
        this.params.leaseIntervalType  = '1'
      }else if (this.tabsIndex === 1){
        this.timeTagIndex = 0
        this.params.endTime = DateAdd('month', this.queryParams.startTime, 3)
        this.params.leaseIntervalType  = '2'
      }else if (this.tabsIndex === 2){
        this.year  = 1
        this.params.endTime = DateAdd('year', this.queryParams.startTime, 1)
        this.params.leaseIntervalType  = '3'
      }
    },
    // 搜索
    toSearch() {
      this.$emit('search')
    },
    // 选择城市
    toCity() {
      uni.navigateTo({
        url: '/pages/main/city'
      })
    },
    // 显示日历
    showCalendarHandel(type) {
      if (type){
        this.calendarMode = type
      }else{
        this.calendarMode = 'range'
      }
      console.log('showCalendarHandel')
      uni.hideTabBar()
      this.showCalendar = true;
    },
    // 隐藏日历
    closeCalendar() {
      this.showCalendar = false
      uni.showTabBar()
    },
    // 确定日期
    confirmCalendar(e) {
      console.log('e',e)
      this.params.startTime = e[0];
      this.params.endTime = e[e.length - 1];
      // let subDay = DateDiff(e[0], e[e.length - 1])
      // this.subDay = subDay
      this.showCalendar = false
    },
    // 显示入住人数
    showMan() {
      uni.hideTabBar()
      this.showManAndBed = true;
    },
    // 隐藏入住人数
    close() {
      this.showManAndBed = false;
      uni.showTabBar()
    },
    // 显示入住人数
    open() {
    },
    // 选择床数
    selectBed(index) {
      if (index == this.params.bedNumber) {
        this.params.bedNumber = null;
      } else {
        this.params.bedNumber = index;
      }
    },
    // 选择入住人数
    selectMan(index) {
      if (index == this.params.checkInNumber) {
        this.params.checkInNumber = null;
      } else {
        this.params.checkInNumber = index;
      }
    },
    // 确定
    submitBed() {
      this.showManAndBed = false;
      uni.showTabBar();
    },
    //清空床位
    clearBed() {
      this.params.checkInNumber = null;
      this.params.bedNumber = null;
    },
    // 选择时间标签
    selectTimeTag(data,index) {
      this.timeTagIndex = index;
      let end = DateAdd('month', this.params.startTime, Number(data.value))
      console.log('end', end)
      this.params.endTime = end
    }
  }
}
</script>
<style scoped lang="scss">
.container {
  background: #FFFFFF;
  padding: 20rpx 30rpx;
  border-radius: 20rpx;
}

.tebs__content {
  .night {

    font-weight: 500;
    font-size: 24rpx;
    color: #222222;
    text-align: left;
    margin-left: 4rpx;
  }

  .time {
    margin-top: 30rpx;

    .time-title {
      font-weight: 500;
      font-size: 24rpx;
      color: #666666;
      text-align: left;
    }

    .time-date {

      font-weight: bold;
      font-size: 32rpx;
      margin-top: 8rpx;
      color: #222222;
      text-align: left;
    }
  }

  .area {
    width: 100%;
    margin-top: 46rpx;
  }

  .area-text {

    font-weight: bold;
    font-size: 34rpx;
    color: #000000;
    //text-align: center;


    margin-right: 16rpx;
    width: 160rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

  }

  .vertical {
    width: 0rpx;
    height: 44rpx;
    border: 2rpx solid #E5E5E5;
    margin-left: 24rpx;
    margin-right: 24rpx;
  }

  .location-img {
    width: 37rpx;
    height: 37rpx;
    margin-left: 24rpx;
  }

  .search-input {
    width: 360rpx;
    height: 42rpx;

    font-weight: 500;
    font-size: 26rpx;
    text-align: left;


  }

  .search-input::placeholder {
    color: #CCCCCC;
  }

  .dateBox {
    display: flex;
    align-items: center;
    margin-top: 30rpx;
    justify-content: space-between;

    &__item {
      &__label {
        font-weight: 500;
        font-size: 24rpx;
        color: #666666;
        text-align: left;
      }

      &__value {
        font-weight: bold;
        font-size: 32rpx;
        margin-top: 8rpx;
        color: #222222;
        text-align: left;

        .tags {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          grid-gap: 10rpx;

          &__item {
            border-radius: 8rpx;
            padding: 4rpx 10rpx;
            background: #F7F7F7;
            text-align: center;
            font-size: 26rpx;
            height: 40rpx;

            &.active {
              background: #FF7947;
              color: #FFFFFF;
            }
          }
        }
        .input{
          width: 50%;
          position: relative;
          left: 50%;
          transform: translateX(-50%);
        }

      }
    }
  }
}
</style>